<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例生命周期</title>
    <!-- 1.引入本地资源-->
    <script src="../js/vue-dev.js"></script>
    <!-- 2.引入外部资源-->
    <!--<script src="https://unpkg.com/vue"></script>-->
</head>

<body>

    <script>
        /**
         * 1、每个 Vue 实例在被创建之前都要经过一系列的初始化过程。
         *      1.1 配置数据观测(data observer)
         *      1.2 编译模版
         *      1.3 挂载实例到 DOM
         *      1.4 然后在数据变化时更新 DOM
         * 2、在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会；
         *      2.1 created 这个钩子在 实例被创建之后 被调用
         *      2.2 在实例生命周期的不同阶段调用，如 mounted、updated、destroyed钩子；
         *
         * 3、钩子的 this 指向调用它的 Vue 实例。
         */
        var vm = new Vue({
            data: {
                a: 1
            },
            created: function () {
                // `this` 指向 vm 实例
                console.log('a is: ' + this.a)
            }
        })
        // -> "a is: 1"
        /**
         *  4、Vue.js 没有“控制器”的概念，因为 组件的自定义逻辑 可以分布在这些 钩子中 。
         */

    </script>

</body>

</html>